<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>

<!--<div id="exampleDiv" style="display: none;">示例文本</div>-->
<!--<div id="exampleDiv">示例文本</div>-->
<!--<button id="showButton">显示</button>-->

<div id="exampleDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<button id="animateButton">动画</button>
<script>
    $('#animateButton').click(function () {
        $('#exampleDiv').animate({
            width: '200px',
            height: '200px',
            // backgroundColor: 'red'
        }, 1000); // 自定义动画
    });
</script>
<script>
    $('#showButton').click(function () {

        // $('#exampleDiv').slideUp();
        // $('#exampleDiv').slideToggle();
        // $('#exampleDiv').slideDown();

        // $('#exampleDiv').fadeToggle();
        // $('#exampleDiv').show(); // 显示隐藏的元素
        // $('#exampleDiv').show(3000); // 显示隐藏的元素

        // $('#exampleDiv').hide(1500);

        // $('#exampleDiv').toggle();
        // $('#exampleDiv').fadeIn();
        // $('#exampleDiv').fadeOut(3000);
        // $('#exampleDiv').fadeIn(5000);
    });
</script>
</body>
</html>